<script lang="ts" setup>
import { vue3ScrollSeamless } from 'vue3-scroll-seamless'
import Courses from '@/assets/json/courses.json'
import Lecturers from '@/assets/json/lecturers.json'
let list = reactive([1, 2, 3, 4, 5])
const classOptions = {
  limitMoveNum: 1, //  无缝滚动数据量
  direction: 2, // 滚动方向  左
  classOption: 0.2, // 滚动速度
}
// 课程推荐数据
const courses = ref(Courses.data)
// 讲师
const lecturers = ref(Lecturers.dataList)
// 截取前四个课程
const fourCourses = courses.value.slice(0, 4)
</script>

<template>
  <div class="home">
    <!-- 轮播图组件 -->
    <educ-carousel></educ-carousel>
    <!-- 课程推荐 -->
    <p>课程推荐</p>
    <educ-curriculum :courses="fourCourses"></educ-curriculum>
    <!-- 推荐教师 -->
    <p>推荐教师</p>
    <vue3ScrollSeamless
      class="scroll-wrap"
      :classOptions="classOptions"
      :data-list="list"
    >
      <educ-introduce-gard :lecturers="lecturers"></educ-introduce-gard>
    </vue3ScrollSeamless>
    <!-- 推荐教师 -->
    <p>精品课程</p>
    <educ-excellent-courses />
  </div>
</template>

<style lang="scss" scoped>
.scroll-wrap {
  overflow: hidden;
}

p {
  font-size: 1.5rem;
  text-align: center;
}
</style>
